var arr = [{
			id: 85,
			name: "张三",
			mobile: 13954992281,
			tel: 22278,
			address: "山东省 潍坊市 寿光市 圣城街道",
			close: "山东省 潍坊市 寿光市 圣城街道 光明道路"
		},
		{
			id: 48,
			name: "李四",
			mobile: 15866974588,
			tel: 22255,
			address: "山东省 临沂市 费县 费城街道",
			close: "山东省 临沂市 费县 费城街道 长寿路"
		},
		{
			id: 184,
			name: "王五",
			mobile: 15153998557,
			tel: 22236,
			address: "山东省 临沂市 费县 梁邱镇",
			close: "山东省 临沂市 费县 梁邱镇 建设东路"
		},
		{
			id: 1,
			name: "马六",
			mobile: 19862653052,
			tel: 22196,
			address: "山东省 临沂市 费县 朱田镇",
			close: "山东省 临沂市 费县 朱田镇 繁荣大道"
		}
	],
	form = document.forms.abc,
	list = document.querySelector("div.list-center>div"),
	htmlStr = "";

// 动态渲染网页(将用户输入的内容渲染到网页上)
arr.forEach(function(item, i) {
	htmlStr +=
		`
			<div>
				<h5>${item.name}</h5>
				<span>${item.mobile}</span>	
				<p>${item.close}</p>
				<button data-id="${item.id}"  class="btn-update">修改</button>
				<button data-id="${item.id}" class="btn-delete">删除</button>
			</div>	
		`;
})
list.innerHTML = htmlStr;
// 页面上的新建页面
var addBtn = document.querySelector("button.btn-add");
var form = document.forms["abc"];
var dialog = document.querySelector("div.dialog");

addBtn.onclick = function() {
	form.index.value = -1;
	dialog.classList.add("active");
	form.reset();
}
// form表单的取消按钮
var cencelBtn = document.querySelector("button.btn-cencel");
cencelBtn.onclick = function() {
	dialog.classList.remove("active");
}
// 删除按钮的实现
list.onclick = function(e) {
	if (e.target.classList.contains("btn-delete")) {
		// 询问用户是否删除
		if (!confirm("真的要删除吗")) return;
		// 通过藏得id值去寻找下标
		var id = parseInt(e.target.dataset.id);
		var i = arr.findIndex(function(item) {
			return item.id === id;
		})
		// 删除数组中的数据
		arr.splice(i, 1);
		// 删除页面上的div
		e.target.parentNode.remove();
		// 提示用户删除成功
		alert("删除成功..")
	}
	if (e.target.classList.contains("btn-update")) {
		var id = parseInt(e.target.dataset.id)
		var i = arr.findIndex(function(item) {
			return item.id === id
		})
		form.index.value = id,
			form.name.value = arr[i].name,
			form.mobile.value = arr[i].mobile,
			form.tel.value = `0536-${arr[i].tel}`,
			regionPicker.set(arr[i].address),
			form.close.value = arr[i].close
		dialog.classList.add("active");
	}
}
// 确定按钮的实现
var btnSave = document.querySelector("button.btn-save");
btnSave.onclick = function() {
	// 取出value查找是修改还是新建
	var id = parseInt(form.index.value)
	if (id === -1) {
		// 收集表单里的内容
		var newItem = {
				id: arr.length === 0 ? 1 : arr[arr.length - 1].id + 1,
				name: form.name.value,
				mobile: parseInt(form.mobile.value),
				tel: parseInt(form.tel.value),
				address: regionPicker.get(),
				close: form.close.value
			},
			// 创建一个新的div 
			newDiv = document.createElement("div");
		// 给新的div加入内容
		newDiv.innerHTML =
			`
				<div>
					<h5>${newItem.name}</h5>
					<span>${newItem.mobile}</span>
					<p>${newItem.close}</p>
					<button data-id="${newItem.id}" class="btn-update">修改</button>
					<button data-id="${newItem.id}" class="btn-delete">删除</button>
				</div>
			`;
		// 添加进数组里 
		arr.push(newItem)
		// 渲染到页面上 
		list.appendChild(newDiv);
		dialog.classList.remove("active");
	} else {
		// 收集表单里的内容
		var newItem = {
				id: id,
				name: form.name.value,
				mobile: parseInt(form.mobile.value),
				tel: parseInt(form.tel.value),
				address: regionPicker.get(),
				close: form.close.value
			},
			// 创建一个新的div 
			newDiv = document.createElement("div");
		// 给新的div加入内容
		newDiv.innerHTML = `
			<div>
				<h5>${newItem.name}</h5>
				<span>${newItem.mobile}</span>	
				<span>0536-${newItem.tel}</span>
				<span>${newItem.address}</span>
				<p>${newItem.close}</p>
				<button data-id="${newItem.id}" class="btn-update">修改</button>
				<button data-id="${newItem.id}" class="btn-delete">删除</button>
			</div>
		`;
		var i = arr.findIndex(function(item) {
			return item.id === id;
		})
		// 修改数组里的内容 
		arr.splice(i, 1, newItem);
		// 修改页面上的内容
		list.children[i].replaceWith(newDiv);
		// 重置表单内容
		form.reset();
		// 关闭表单
		dialog.classList.remove("active");
	}
}
var lis = document.querySelectorAll("ul.list>li");
lis.forEach(function(item) {
	item.onclick = function() {
		if (!this.classList.contains("show"))
			document.querySelector("ul.list>li.show").classList.remove("show")
		this.classList.add("show")
	}
})